<template>
  <div class="flow-com">
    <div class="d-none d-sm-none d-md-block d-lg-block">
      <ul v-if="isClose">
        <li @click="showCode">
          <img src="../assets/images/flow-2.png" alt="">
        </li>

         <li class="phone-hover">
            <a :href="`tel:${header.hotline}`">
              <img src="../assets/images/flow-4.png" alt="">
            </a>
           <div class="phone-show">
             <div>
               <h4>
                 <span class="icon iconfont icon-phone"></span>
                 咨询热线
               </h4>
               <p>{{header.hotline}}</p>
             </div>
           </div>
          </li>
        <li class="code">
          <img src="../assets/images/flow-5.png" alt="">
          <div class="code-box">
            <img :src="getUrl(company.qrCode)" />
            <div class="text">
              <h2>微信扫描二维码</h2>
              <h3>
                {{company.companyName}}
             </h3>
            </div>
          </div>
        </li>
      </ul>
      <span v-if="isClose" @click="closes" class="close icon iconfont  icon-LC_icon_close_fill_circle"></span>
      <span v-else @click="showFlow" class="close icon iconfont icon-yk_zhankai_fill"></span>
    </div>
    <div class="d-sm-block d-md-none d-lg-none">
      <ul class="sm-nav">
        <li  @click="showCode">
          <span class="icon iconfont icon-yuyueguahao"></span>
          <p>预约挂号</p>
        </li>
        <li v-if="false">
          <a :href="company.qq" target="_blank">
            <span class="icon iconfont icon-zixun"></span>
            <p>在线咨询</p>
          </a>
        </li>
        <li>
          <a :href='`tel:${header.hotline}`'>
            <span class="icon iconfont icon-dianhua"></span>
            <p>电话咨询</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>


  export default {
    props:['company','isClose','header'],
    computed: {},
    data() {
      return {
      }
    },
    components: {

    },
    mounted() {

    },
    methods: {
      showCode(){
        this.$emit('show-code')
      },
      closes(){
        this.$emit('close')
      },
      showFlow(){
        this.$emit('show-flow')
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .flow-com{
    position: fixed;
    z-index: 70;
    .close{
      display: block;
      position: absolute;
      z-index: 10;
      top: -35/@size;
      right: 10/@size;
      font-size: 24/@size;

    }
    .icon-stealth_fill{
      font-size: 30/@size;
    }
    ul{
      .phone-hover{
        &:hover{
          .phone-show{
            width: 200/@size;
            opacity: 1;
          }
        }
      }
      .phone-show{
        position: absolute;
        top: 0;
        right: 80/@size;
        height: 100%;
        z-index: 10;
        background-color: #6ecf3e;
        border-radius: 8/@size 0 0 8/@size;
        color: #fff;
        width:0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.5s;
        img{
          display: inline-block;
        }
        .icon-phone{
          font-size: 30/@size;
        }
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        h4{
          font-size: 16/@size;
        }
        p{
          font-size: 18/@size;
          font-weight: bold;
          margin-bottom: 0;
        }
      }
      .code{
        &:hover{
          .code-box{
            animation: showCode 0.5s;
            display: block;
          }
        }
      }
    @keyframes showCode {
      0% {
        //transform: translateX(-50%) translateY(30px);
        opacity: 0;
      }

      100% {
        opacity: 1;
        //transform: translateX(-50%) translateY(0);
      }
    }
      li{
        cursor: pointer;
        position: relative;
        .code-box {
          position: absolute;
          right: 0;
          bottom: 0;
          z-index: 10;
          box-shadow: 0px 0px 3px 1px #00A197;
          background: #fff;
          display: none;
          .text{
            h2,h3{
              font-size: 16/@size;
              text-align: center;
            }
            h3{
              color: #00A197;
            }
          }
          img{
            .width(180);
            .height(180);
          }
        }
      }
    }
  }

  @media (min-width: 768px) {
    .flow-com{
      top: 50%;
      transform: translateY(-50%);
      right: 20/@size;
      width: 80/@size;
      height: 225/@size;
    }
  }

  @media (min-width: 320px) and (max-width:767px) {
    .flow-com{
      background-color: @theme-color;
      position: fixed;
      top: auto;
      bottom: 0;
      right: auto;
      left: 0;
      width: 100%;
      height: 100/@size;
      z-index: 100;

      ul{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        li{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #fff;
          span{
            font-size: @font-30;
          }
          a{
            text-decoration: none;
            color: @white-color;
            font-size: @font-30;
            text-align: center;
          }
          .icon{
            font-size: 40/@size;
          }
          p{
            display: block;
            margin-bottom: 0;
          }
        }
      }
    }
  }


</style>
